
@import '@/styles/base.scss';
.header {
  background: #191919;
  height: 72px;
  position: relative;
  box-shadow: 1px 2px 13px 0px rgba(13,4,9,0.1);
}
.logo {
  display: flex;
  align-items: center;
  float: left;
  position: relative;
  width: 160px;
  height: 100%;
  .pic {
    width: 37px;
    height: 37px;
    background-image: url('../../../assets/images/logo.png');
    background-size: 100% 100%;
    margin-left: 24px;
    margin-right: 10px;
  }
}
.h-r {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  .h-r-f {
    margin: 0 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #f3f3f3;
    height: 100%;
  }
  .h-r-t {
    display: block;
  }
  .system, .user {
    cursor: pointer;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .user {
    position: relative;
    padding-right: 22px;
    &:after {
      content: '';
      width: 7px;
      height: 7px;
      border: 1px solid #fff;
      border-left: none;
      border-bottom: none;
      position: absolute;
      top: 50%;
      right: 4px;
      transform: translateX(-4px) translateY(-4px) rotate(135deg);
      transition: .2s;
    }
    .user-action {
      display: none;
      transition: all 0.3s;
      position: absolute;
      padding: 0 20px;
      left: 50%;
      top: 72px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
      text-align: center;
      background: #fff;
      transform: translateX(-50%);
      min-width: 100px;
      font-size: 12px;
      color: #333;
      z-index: 4;
      .active-list {
        line-height: 30px;
        cursor: pointer;
      }
      .active-menu {
        padding-top: 20px;
        overflow: hidden;
        width: 258px;
        li {
          float: left;
          width: 86px;
          height: 77px;
          margin-bottom: 20px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          // &:hover {
          //   background: #f3f3f3;
          // }
          &:nth-child(2) {
            .icon {background-position: -30px 0;}
          }
          &:nth-child(3) {
            .icon {background-position: -60px 0;}
          }
          &:nth-child(4) {
            .icon {background-position: -90px 0;}
          }
          &:nth-child(4) {
            .icon {background-position: -120px 0;}
          }
          &:nth-child(5) {
            .icon {background-position: -150px 0;}
          }
        }
        .icon {
          width: 30px;
          height: 30px;
          // color: $themeColor;
          // background: red;
          background-image: url('../../../assets/images/mvmc_seting.png');
          background-position: 0 0;
          
        }
        .text {
          width: 100%;
        }
      }
    }
    &:hover .user-action {
      display: block;
    }
  }
  .login-out {
    background: $themeColor;
    padding: 0 12px;
    margin: 0;
    cursor: pointer;
    .close-icon {
      font-size: 20px;
    }
  }
}